<script setup>
import {ref, watchEffect} from 'vue';
import {useRouter} from 'vue-router';

// 使用 ref 创建一个响应式变量来保存搜索关键词
const searchKeyword = ref('');
// 获取 Vue Router 实例
const router = useRouter();

// 监听 URL 查询参数中的 keyword，并将其值设置到 input 中
watchEffect(() => {
  const {keyword} = router.currentRoute.value.query;
  if (keyword) {
    searchKeyword.value = keyword;
  }
});

// 处理搜索逻辑
const handleSearch = () => {
  // 获取当前的查询参数
  const currentQuery = router.currentRoute.value.query;
  // 将新的关键词添加到查询参数中
  const newQuery = {...currentQuery, keyword: searchKeyword.value};
  // 保持当前路径不变，更新查询参数
  router.push({query: newQuery});
};
</script>

<template>
  <el-input
      v-model="searchKeyword"
      placeholder="请输入搜索关键词"
      suffix-icon="el-icon-search"
      @keyup.enter="handleSearch"
  ></el-input>
</template>

<style scoped>
.el-input__inner:focus {
  border-color: transparent; /* 去掉聚焦时的边框颜色 */
  outline: none; /* 去掉轮廓线 */
  box-shadow: none; /* 去掉阴影效果 */
}

</style>